<template>
  <div class="daily_contain">
    <div class="left_list">
      <div class="list_title">预警监控信息</div>
      <div class="list_menu">
        <Tab />
      </div>
    </div>
    <!-- <div class="map">
      <Omap></Omap>
    </div> -->
    <div class="right_list">
      <div class="query">
        <div class="query_contain">
          <div class="selects">
            <span>日期</span>
            <input type="date">
          </div>
          <div class="selects">
            <span>时次</span>
            <select name="" id="">
              <option value="">20</option>
              <option value="">30</option>
            </select>
          </div>
          <div class="selects">
            <span>时效</span>
            <select name="" id="">
              <option value="">24</option>
              <option value="">48</option>
            </select>
          </div>
          <div class="button">
            <button>查看</button>
            <button>清除</button>
            <button>向前</button>
            <button>向后</button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>
<script>
import Tab from "../../../components/Tab.vue"
export default {
  data() {
    return {

    };
  },
  mounted() { },

  methods: {

  },
  components: {
    Tab,
  },
};
</script>
<style scoped>
.daily_contain {
  height: 100%;
  width: 100%;
  display: flex;
}

.daily_contain .map {
  width: calc(100% - 700px);
  height: 100%;
}

.daily_contain .left_list {
  width: 400px;
  height: 100%;
  background-color: #fff;
}

.daily_contain .left_list .list_title {
  width: 100%;
  height: 30px;
  background-color: #f6f7f8;
  color: #0c1f7b;
  font-size: 14px;
  font-weight: 900;
  line-height: 30px;
  padding-left: 15px;
  box-sizing: border-box;
}

.daily_contain .left_list .list_menu {
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 30px;
}

.daily_contain .right_list {
  width: 300px;
  height: 100%;
  background-color: #fff;
}

.daily_contain .right_list .query {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
}

.daily_contain .right_list .query .query_contain {
  width: 160px;
  height: 100%;
  font-size: 12px;
padding: 10px 0 0;
box-sizing: border-box;
}

.daily_contain .right_list .query .query_contain .selects {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.daily_contain .right_list .query .query_contain .selects select {
  width: 120px;
  height: 20px;
  outline: none;
}

.daily_contain .right_list .query .query_contain .selects input {
  width: 116px;
  height: 18px;
  outline: none;
}

.daily_contain .right_list .query .query_contain .button {
  width:100%;
  height: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.daily_contain .right_list .query .query_contain .button button{
  width: 70px;
  height: 22px;
  font-size: 12px;
  margin-top: 10px;
  outline: none;
  border-radius: 3px;
  border: 1px solid;
}
</style>


